<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    li{
        width : 200px;
        height : 100px;
        background-color : pink;
        border-bottom: 1px solid red;
    }
</style>
</head>
<body>
<ul id="items">
    <li id="item1">项目1</li>
    <li id="item2">项目2</li>
    <li id="item3">项目3</li>
    <li id="item4">项目4</li>
</ul>
<script>
/*
事件委托(事件代理)
 */
document.onclick = function (e){
    switch (e.target.id){
        case "item1":
            console.log("你点击了第一个项目");
            break;
        case "item2":
            console.log("你点击了第二个项目");
            break;
        case "item3":
            console.log("你点击了第三个项目");
            break;
        case "item4":
            console.log("你点击了第四个项目");
            break;
    }
}
</script>
</body>
</html>